import dayjs from "dayjs";
import { message } from "@/utils/message";
// import { getUserList } from "@/api/system";
import { ElMessageBox, ElMessage } from "element-plus";
import { type PaginationProps } from "@pureadmin/table";
import {
  reactive,
  ref,
  computed,
  onMounted,
  shallowRef,
  onBeforeUnmount
} from "vue";

export function flowdesHook() {
  const form = reactive({
    username: "",
    mobile: "",
    status: ""
  });
  const eventform = reactive({});
  const loading = ref(true);
  const selectionarr = ref([]);
  const dialogFlowVisible = ref(false);
  const zhuanfaVisible = ref(false);
  const cuibanVisible = ref(false);
  const jiaobanVisible = ref(false);
  const zhidingtuihuiVisible = ref(false);
  const tuihuichongtianVisible = ref(false);
  const detailVisible = ref(false);
  const detailtype = ref("流程图");

  const zhuanfadata = ref([]);

  const rules = ref({
    flowname: [{ required: true, message: "请输入流程名称", trigger: "blur" }]
  });
  const eventrules = ref({
    eventname: [{ required: true, message: "请输入流程名称", trigger: "blur" }],
    version: [{ required: true, message: "请输入版本", trigger: "blur" }],
    port: [{ required: true, message: "请输入版本", trigger: "blur" }]
  });
  const tableData = ref([
    {
      date: "2016-05-03",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles"
    }
  ]);

  const tableData1 = ref([
    {
      date: "2016-05-03",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles"
    }
  ]);
  const tableData2 = ref([
    {
      date: "2016-05-03",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles"
    }
  ]);
  const tableData3 = ref([
    {
      date: "2016-05-03",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles"
    }
  ]);
  const columns1: TableColumnList = [
    {
      label: "序号",
      prop: "date"
    },
    {
      label: "节点名称",
      prop: "name"
    },
    {
      label: "节点处理人",
      prop: "name"
    },
    {
      label: "部门",
      prop: "name"
    },
    {
      label: "开始时间",
      prop: "name"
    },
    {
      label: "操作",
      prop: "name"
    },
    {
      label: "操作描述",
      prop: "name"
    },
    {
      label: "处理时间",
      prop: "name"
    },
    {
      label: "意见内容",
      prop: "name"
    },
    {
      label: "用时",
      prop: "name"
    }
  ];
  const columns2: TableColumnList = [
    {
      label: "序号",
      prop: "date"
    },
    {
      label: "知会发起人",
      prop: "date"
    },
    {
      label: "知会时间",
      prop: "date"
    },
    {
      label: "被知会人",
      prop: "date"
    },
    {
      label: "处理时间",
      prop: "date"
    },
    {
      label: "已阅意见",
      prop: "date"
    }
  ];
  const columns3: TableColumnList = [
    {
      label: "序号",
      prop: "date"
    },
    {
      label: "催办人",
      prop: "name"
    },
    {
      label: "催办时间",
      prop: "date"
    },
    {
      label: "被催办人",
      prop: "date"
    },
    {
      label: "留言",
      prop: "date"
    }
  ];

  function jiaqian() {
    if (!valueHtml.value) {
      ElMessageBox.alert("请输入审批意见后操作加签！", "系统提示", {
        confirmButtonText: "关闭"
      });
      return;
    }
    ElMessageBox.alert("加签！", "系统提示", {
      confirmButtonText: "关闭"
    });
  }
  function chehui() {
    ElMessageBox.confirm("请确认是否撤回单据？", "系统提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    })
      .then(() => {
        ElMessage({
          type: "success",
          message: "1"
        });
      })
      .catch(() => {
        ElMessage({
          type: "info",
          message: "2"
        });
      });
  }
  function openshoucang() {
    ElMessage({
      type: "收藏成功",
      message: "2"
    });
  }
  const handleSelectionChange = val => {
    zhuanfadata.value = val;
  };

  // 富文本
  const mode = "simple";
  // 编辑器实例，必须用 shallowRef
  const editorRef = shallowRef();

  // 内容 HTML
  const valueHtml = ref("<p>hello</p>");

  // 模拟 ajax 异步获取内容
  onMounted(() => {
    setTimeout(() => {
      valueHtml.value = "<p>模拟 Ajax 异步设置内容</p>";
    }, 1500);
  });

  const toolbarConfig: any = {
    toolbarKeys: ["bold", "italic", "underline", "color", "numberedList"]
  };
  const editorConfig = { placeholder: "请输入内容..." };

  // 组件销毁时，也及时销毁编辑器
  onBeforeUnmount(() => {
    const editor = editorRef.value;
    if (editor == null) return;
    editor.destroy();
  });

  const handleCreated = editor => {
    editorRef.value = editor; // 记录 editor 实例，重要！
  };
  function openflow() {
    dialogFlowVisible.value = true;
  }
  function openzhuanfa() {
    zhuanfaVisible.value = true;
  }
  function opencuiban() {
    cuibanVisible.value = true;
  }
  function openjiaoban() {
    jiaobanVisible.value = true;
  }

  function openzhidingtuihui() {
    zhidingtuihuiVisible.value = true;
  }
  function opentuihuichongtian() {
    tuihuichongtianVisible.value = true;
  }
  function opendetail() {
    detailVisible.value = true;
  }
  function openzhongzhi() {
    ElMessageBox.confirm("请确认是否终止单据？", "系统提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    })
      .then(() => {
        ElMessage({
          type: "success",
          message: "1"
        });
      })
      .catch(() => {
        ElMessage({
          type: "info",
          message: "2"
        });
      });
  }

  function openzhihui() {
    ElMessage({
      type: "zhihui成功",
      message: "2"
    });
  }

  return {
    dialogFlowVisible,
    form,
    editorRef,
    toolbarConfig,
    mode,
    valueHtml,
    editorConfig,
    handleCreated,
    openflow,
    jiaqian,
    openzhuanfa,
    zhuanfaVisible,
    chehui,
    tableData,
    handleSelectionChange,
    cuibanVisible,
    opencuiban,
    openshoucang,
    jiaobanVisible,
    openjiaoban,
    opentuihuichongtian,
    openzhidingtuihui,
    zhidingtuihuiVisible,
    tuihuichongtianVisible,
    openzhihui,
    openzhongzhi,
    opendetail,
    detailVisible,
    detailtype,
    columns1,
    columns2,
    columns3,
    tableData1,
    tableData2,
    tableData3
  };
}
